/*
 * @Author: zhumeng@sensorsdata.cn
 * @Date: 2024-04-02 19:42:42
 * @LastEditTime: 2024-04-02 19:54:31
 * @Description:
 */

import { Suspense } from 'react'
import './App.css'
import { Canvas, useLoader } from '@react-three/fiber'

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'

import {
  Html,
  useProgress,
  OrbitControls,
  Environment
} from '@react-three/drei'

export const BaseDemo = () => {
  return (
    <>
      <Canvas>
        <ambientLight intensity={0.1} />
        <directionalLight color="red" position={[0, 0, 5]} />
        <mesh>
          <boxGeometry />
          <meshStandardMaterial />
        </mesh>
      </Canvas>
    </>
  )
}

export function Scene() {
  const obj = useLoader(OBJLoader, '/test.obj')
  return <primitive object={obj} position={[0, 0, 0]} />
}

export function Loader() {
  const { progress } = useProgress()
  return <Html center>{progress} % loaded</Html>
}
const Demo = () => {
  return (
    <div id="canvas-container">
      <Canvas>
        <Suspense fallback={<Loader />}>
          <Scene />
          <pointLight position={[10, 10, 10]} />
          <OrbitControls autoRotate />
          <Environment background preset="sunset" />
        </Suspense>
      </Canvas>
    </div>
  )
}

export default Demo
